<template>
	<view class="zone">
		<Header title="修仙好友"></Header>
		<view class="imgbox">
			<view class="msg">限时奖励</view>
			<image src="http://image.qxgm.site/tdz/img/tk/lw1.png" class="img" mode="widthFix"></image>
			<view class="box">
				<view class="m_title">
					<image src="http://image.qxgm.site/tdz/img/tk/lw3.png" mode="widthFix" />
					<text>活动时间</text>
					<image src="http://image.qxgm.site/tdz/img/tk/lw4.png" mode="widthFix" />
				</view>
				<view class="time">2024-3.11至2024-4.11</view>
				<view class="gg">修仙好友:实名认证+激活免广告特权</view>
			</view>
		</view>
		<view class="mian">


			<view class="msgbox" v-for="(item,index) in list" :key="index">
				<view class="user">
					<view class="p1">{{index==0?'每直推一名修仙好友':'每间推一名修仙好友'}}</view>
					<view class="p2">当前完成好友:{{item.task_num}} 可领取好友数:{{item.task_num - item.receive_task_num}}</view>
				</view>
				<view class="num">
					零钱x{{Math.floor(item.reward)}}
				</view>
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="scopy"
					@click="getlingqu(item)">
					{{item.receive_task_num==item.task_num?'暂无':'领取'}}
				</u-button>
			</view>

			<view class="item">
				<view class="haibao">
					<view>已获得奖励</view>
					<view>奖励好友人数</view>
				</view>
				<view class="sonbox">
					<image src="http://image.qxgm.site/tdz/img/tk/lw7.png" class="tu"></image>
					<view class="look" @click="lookfun">查看</view>
					<view class="p1" style="width: 45%;">¥{{money}}</view>
					<view class="p1">{{people}}人</view>
				</view>
			</view>

			<!-- 修仙好友领取记录 -->
			<u-mask :show="look">
				<view class="warp">
					<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
					<view class="mask_content">
						<view class="m_info">
							<view class="title">
								<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
								<text>已获得奖励</text>
								<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
							</view>
							<view class="list">

								<view class="msgbox" v-for="(item,index) in list2" :key="index">
									<view class="user">
										<view class="p1" style="margin-top: 0;">{{item.finished_time}}</view>
										<view class="p2">好友{{item.user.invite_code}}</view>
									</view>
									<view class="num">
										+{{item.money}}
									</view>
								</view>

								<view class="empty" v-if="list2.length==0">
									<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
									暂无数据
								</view>


							</view>
						</view>
					</view>
					<image class="m_close" @click="look = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
						mode="widthFix" />
					<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
				</view>
			</u-mask>



			<!-- 恭喜获得 -->
			<u-mask :show="obtain" @click="obtain = false">
				<view class="warp2" @tap.stop>
					<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
					<view class="mask_content2">
						<view class="m_info2">
							<view class="plist">

								<view class="parts">
									<view class="sbimg">
										<image class="tanimg" src="http://image.qxgm.site/tdz/img/active/3.png"
											mode="widthFix">
										</image>
									</view>
									<view class="toan">
										零钱x{{yindaonum}}
									</view>
								</view>

							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="refineCon2" @click="obtain=false">确定</u-button>

						</view>
					</view>
					<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
					<view class="dianjireny" @click="obtain = false">
						点击任意位置退出
					</view>
				</view>
			</u-mask>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				look: false,
				obtain: false,
				yindaonum: '',
				list: [],
				list2: [],
				money: '',
				people: '',
			}
		},
		onShow() {

		},
		onLoad() {
			this.taskxiuxian()
			this.taskxiuxianRecelog()
		},
		methods: {
			// 获取修仙好友
			async taskxiuxian() {
				let res = await this.$http.index.taskxiuxian()
				if (res.code == 1) {
					this.list = res.data.list
					this.money = res.data.money
					this.people = res.data.people
				}
			},
			// 修仙好友领取记录
			async taskxiuxianRecelog() {
				let res = await this.$http.index.taskxiuxianRecelog()
				if (res.code == 1) {
					this.list2 = res.data
				}
			},
			async getlingqu(item) {
				if (item.receive_task_num == item.task_num) {
					this.$u.toast('暂无可领取的零钱')
					return
				}
				let res = await this.$http.index.taskxiuxianRece({
					task_id: item.id
				})
				if (res.code == 1) {
					this.yindaonum = item.un_receive_money
					this.taskxiuxian()
					this.obtain = true
				} else {
					this.$u.toast(res.msg)
				}
			},
			lookfun() {
				this.look = true
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.imgbox {
		position: relative;

		.img {
			width: 100%;
		}

		.msg {
			position: absolute;
			right: 20px;
			top: -20px;
			font-size: 20px;
			color: #ffffff;
		}

		.box {
			background: url(http://image.qxgm.site/tdz/img/tk/lw2.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			width: 100%;
			bottom: 0px;
			padding: 10px 0;

			.m_title {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 21%;
				}

				text {
					font-size: 20px;
					color: #ffffff;
					font-weight: normal;
					line-height: 12px;
					margin: 0 4%;
				}
			}

			.time {
				text-align: center;
				font-size: 20px;
				color: #ffffff;
			}

			.gg {
				background: url(http://image.qxgm.site/tdz/img/tk/lw5.png) no-repeat;
				background-size: 100% 100%;
				width: 90%;
				float: right;
				padding: 5px 5px 5px 10px;
				color: #FFFFCC;
				font-size: 18px;
				text-align: right;
				margin-top: 5px;
			}
		}
	}

	.mian {
		height: calc(100vh - 460px);
		background-color: #d3cbc6;
		padding: 10px;
		box-sizing: border-box;

		.msgbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			padding: 15px;
			box-sizing: border-box;
			margin-bottom: 5px;

			.user {

				.p1 {
					margin-top: 10px;
					font-size: 14px;
				}

				.p2 {
					margin-top: 10px;
					font-size: 12px;
				}
			}

			.num {
				color: #006600;
			}

			.scopy {
				width: 58px;
				height: 33px;
				font-size: 14px;
				text-align: center;
				font-weight: normal;
				color: #f9e5b6;
				line-height: 33px;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.item {
			background: linear-gradient(0deg, rgba(67, 52, 98, 0.2), rgba(67, 52, 98, 0.2));
			border-radius: 2px;
			padding: 2px 2px 15px 2px;
			box-sizing: border-box;
			margin-top: 10px;

			.haibao {
				background: url(http://image.qxgm.site/tdz/img/tk/lw6.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-around;
				font-size: 18px;
				color: #333333;
				padding: 20px 0;

			}

			.sonbox {
				background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				padding: 20px 0;
				margin-top: 10px;
				position: relative;

				.look {
					width: 58px;
					height: 33px;
					display: block;
					font-size: 12px;
					text-align: center;
					font-weight: normal;
					color: #f9e5b6;
					line-height: 33px;
					text-shadow: 0 1px 1px #CB6500;
					background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
					background-size: 100% 100%;
					position: absolute;
					right: 10px;
				}

				.p1 {
					width: 50%;
					text-align: center;
					color: #333333;
					font-size: 16px;
				}

				.tu {
					position: absolute;
					z-index: 9;
					left: 50%;
					width: 2px;
					height: 39px;
					background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px 0 6px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.list {
		margin-top: 10px;
		padding: 0 25px;
		height: 40vh;
		overflow-y: scroll;
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			display: block;
			margin: 0 auto;
			width: 64%;
			padding: 3% 7%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			display: flex;
			align-items: center;
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
</style>